import UploadImage from '@/components/Upload';
import MyEditor from '@/components/Wangeditor';
import { addDoctorAPI, delDoctorAPI, loadData, modifyDoctorAPI } from '@/services/hospital';
import { dalImg } from '@/utils/tools';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  PageContainer,
  ProForm,
  ProFormText,
  ProFormTextArea,
  ProTable,
} from '@ant-design/pro-components';
//@ts-ignore
import { FormattedMessage } from '@umijs/max';
import { Button, Popconfirm, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';

function Hospitals() {
  // 编辑器内容
  const [html, setHtml] = useState('');
  //展示上传图片地址
  const [imageUrl, setImageUrl] = useState<string>();
  //模态框状态
  const [isShow, setIsShow] = useState(false);
  //操作表单
  const [myForm] = ProForm.useForm();
  //设置修改id
  const [editID, setEditID] = useState('');
  const actionRef = useRef<any>();

  //模态框关闭后需要清除的数据
  useEffect(() => {
    if (!isShow) {
      setEditID('');
      setImageUrl('');
      setHtml('');
    }
  }, [isShow]);
  return (
    <PageContainer>
      <ProTable
        //定义actionRef可以用来改变数据后刷新表单
        actionRef={actionRef}
        //key值
        rowKey="id"
        //边框
        bordered
        //请求表格数据
        request={loadData}
        //右上角新增按钮
        toolBarRender={() => {
          return [
            <Button
              onClick={() => {
                setIsShow(true);
              }}
              size="small"
              type="primary"
              key={crypto.randomUUID()}
            >
              <PlusOutlined />
              <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
            </Button>,
          ];
        }}
        //每一列表示的数据
        columns={[
          {
            title: '序号',
            width: '60px',
            align: 'center',
            //search表示是否可搜索
            search: false,
            //return返回值作为数据填充当前列，参数一、参数二表示接口返回的数组中的每一项数据，参数三表示当前行表示的索引(从0开始)
            render(value, item, index) {
              return index + 1;
            },
          },
          {
            title: '头像',
            align: 'center',
            search: false,
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            render(value: any, item: any, index: any) {
              // console.log(value);
              return <img width="80px" src={dalImg(value.image)}></img>;
            },
          },
          {
            title: '姓名',
            align: 'center',
            dataIndex: 'name',
          },
          {
            title: '简介',
            //dataIndex表示当前列数据在数据项中对应的路径(属性名表示的属性值)
            dataIndex: 'desc',
            align: 'center',
            ellipsis: true,
            search: false,
          },
          {
            title: '地址',
            align: 'center',
            search: false,
            dataIndex: 'address',
          },
          {
            title: '电话',
            align: 'center',
            search: false,
            dataIndex: 'phone',
          },
          {
            title: '操作',
            align: 'center',
            search: false,
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            render(value: any, item: any, index: any) {
              return (
                <Space>
                  <Button
                    type="primary"
                    onClick={() => {
                      setIsShow(true);
                      myForm.setFieldsValue(item);
                      setEditID(item.id);
                      setImageUrl(dalImg(item.image));
                      setHtml(item.content);
                    }}
                    icon={<EditOutlined />}
                  ></Button>
                  <Popconfirm
                    title="删除"
                    description="是否确认删除？"
                    onConfirm={() => {
                      delDoctorAPI(value.id).then(() => {
                        actionRef.current.reload();
                      });
                    }}
                    okText="确认"
                    cancelText="取消"
                  >
                    <Button type="primary" danger icon={<DeleteOutlined />}></Button>
                  </Popconfirm>
                </Space>
              );
            },
          },
        ]}
      ></ProTable>
      {/* 模态框 */}
      <ModalForm
        form={myForm}
        width="650px"
        //modalProps值是一个对象，maskClosable表示点击遮罩层是否关闭模态框，destroyOnClose表示关闭模态框是否清空其中的数据
        modalProps={{ maskClosable: false, destroyOnClose: true }}
        //open控制模态框弹出
        open={isShow}
        //open 改变时触发
        onOpenChange={setIsShow}
        onFinish={async (v) => {
          // v 表示由表单中name属性值组成的对象
          // console.log(v);
          if (editID) {
            //修改
            await modifyDoctorAPI(editID, { ...v, image: imageUrl, content: html });
          } else {
            //新增
            await addDoctorAPI({ ...v, image: imageUrl, content: html });
          }
          //数据改变之后刷新
          actionRef.current.reload();
          setIsShow(false);
        }}
      >
        <ProForm.Group>
          <ProFormText
            width="md"
            name="name"
            label="姓名"
            rules={[
              {
                required: true,
                message: '不能为空',
              },
            ]}
            placeholder="请输入姓名"
          />
        </ProForm.Group>
        <ProForm.Item label="头像">
          {/* 图片上传 */}
          <UploadImage imageUrl={imageUrl} setImageUrl={setImageUrl} />
        </ProForm.Item>
        <ProForm.Item>
          <ProFormText label="电话" name="phone" width="md" />
        </ProForm.Item>
        <ProForm.Item>
          <ProFormText label="地址" name="address" width="lg" />
        </ProForm.Item>
        <ProForm.Group>
          <ProFormTextArea width="lg" name="desc" label="简介" placeholder="请输入简介" />
        </ProForm.Group>
        <ProForm.Item label="详情">
          {/* 富文本编辑器 */}
          <MyEditor html={html} setHtml={setHtml} />
        </ProForm.Item>
      </ModalForm>
    </PageContainer>
  );
}

export default Hospitals;
